/// Button Sizes
/// @param {Number} $padding-vertical 垂直方向的`padding`
/// @param {Number} $padding-horizontal 水平方向的`padding`
/// @param {Number} $font-size 字号
/// @param {Number} $line-height 行高
/// @param {Number} $border-radius 圆角
/// @example
/// //SCSS
/// .btn{
/// 	@include button-size(5px,15px,16px,1.5,null);
///	}
/// //CSS
/// .btn {
///  	padding: 5px 15px;
///  	line-height: 1.5;
///	}
@mixin button-size($padding-vertical,$padding-horizontal,$font-size,$line-height,$border-radius){
	padding: $padding-vertical $padding-horizontal;
	line-height: $line-height;
	border-radius: $border-radius;
}

/// Button variants
/// @param {String} $color 文本颜色
/// @param {String} $background 背景颜色
/// @param {String} $border-color 边框颜色
/// @example
/// //SCSS
/// .btn {
///  	@include button-variant(#fff,#f36,#f36);
///	}
///	//CSS
///	.btn {
///		color: #fff;
///		background-color: #f36;
///		border-color: #f36;
///		transition: all .2s ease;
///	}
///	.btn:hover,
///	.btn:focus,
///	.btn:active {
///  	color: #fff;
///	  	background-color: #ff245b;
///  	border-color: #ff1a53;
///	}
///	.btn[disabled],
///	.btn[disabled]:hover,
///	.btn[disabled]:focus,
///	.btn[disabled]:active,
///	fieldset[disabled] .btn,
///	fieldset[disabled] .btn:hover,
///	fieldset[disabled] .btn:focus,
///	fieldset[disabled] .btn:active {
///	  	background-color: #f36;
///  	border-color: #f36;
///	}
@mixin button-variant($color,$background,$border-color){
	color: $color;
	background-color: $background;
	border-color: $border-color;
	transition: all .2s ease;

	&:hover,
	&:focus,
	&:active {
		color: $color;
		background-color: darken($background, 3%);
		border-color: darken($border-color, 5%);
	}

	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&:active {
			background-color: $background;
			border-color: $border-color;
		}
	}
}